<template>
    <el-table :data="state.week_data" height="700" 
    :default-sort="state.sort"
    @sort-change="sortChange"
    :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column prop="date" label="添加日期" sortable width="180"/>
        <el-table-column prop="currentPrice" label="当前价格"/>
        <el-table-column prop="monitorPrice" label="监控价格"/>
        <el-table-column prop="type" label="type"/>
        <el-table-column prop="description" label="desc" width="230"/>
        <el-table-column prop="disPct" label="disPct" sortable/>
        <el-table-column prop="weight" label="权重" sortable/>
        <el-table-column prop="category" label="catregory"/>
        <el-table-column prop="trigger" label="trigger"/>
    </el-table>
</template>

<script>
// 个股周数据详情页
import { reactive, watch } from 'vue';
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router'
import { getMonitorStockPriceData } from '../service/monitor';

export default {
    name: 'WeekStockDetail',

    setup() {
        const sortPropKey = "weekStockDetailSortProp"
        const sortOrderKey = "weekStockDetailSortOrder"

        const stockSearchStore = weekStockSearch()
        let { input } = storeToRefs(stockSearchStore)

        // 网址传参
        const {query: query} = useRoute()
        if(query.stock) {
            input.value = query.stock
        }

        const state = reactive({
            week_data: [],
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || 'date' , 
                order: sessionStorage.getItem(sortOrderKey) || 'descending' 
            }
        })

        getMonitorStockPriceData(input.value).then(res => {
            state.week_data = res.data.reverse().slice(0, 220)
        })

        // 只监听pinia中某一个值的变化
        watch(() => input.value, (newValue, oldValue) => {
            reloadData()
        })


        const reloadData = () => {
            getMonitorStockPriceData(input.value).then(res => {
                state.week_data = res.data.reverse().slice(0, 220)
            })
        }

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property

            if (columnProperty == "type") {
                if (row[columnProperty] == "价格跌破") {
                    return 'lt0-cell'
                }
            }

            if (columnProperty == "trigger") {
                if (row[columnProperty] == true) {
                    return 'wugu-lt100-cell'
                }

            }

            return ''
        }

        return {state, tableCellClassName, sortChange}
    }
}
</script>


<style scope>
</style>